<template>
  <el-dropdown trigger="click" @command="handleLanguageChange">
    <div>
      <div class="size-icon--style">
        <svg-icon class-name="size-icon" icon-class="language" />
      </div>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item v-for="item in langOptions" :key="item.value" :disabled="appStore.language === item.value"
          :command="item.value">
          {{ item.label }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import useAppStore from '@/store/modules/app';
const langOptions = [
  { label: "中文", value: 'zh' },
  { label: "English", value: 'en' }
];

const appStore = useAppStore();

const { locale, t } = useI18n();
function handleLanguageChange(lang: string) {
  // proxy!.$modal.loading(t("langSelect.message.success"));
  locale.value = lang;
  appStore.setLanguage(locale.value);
  // ElMessage.success(t("langSelect.message.success"));
  // 刷新页面
  // setTimeout('window.location.reload()', 1000);
}
</script>
<style lang="scss" scoped>
.size-icon--style {
  font-size: 18px;
  line-height: 50px;
  // padding-right: 7px;
}
</style>
